@import "../_function";
@import "../_variables";
@import "../mixin";

.special {
	height: 100%;
	display: flex;
	flex-direction: column;
	&-main {
		flex: 1;
		overflow: auto;
		padding-bottom: pr(50);
	}
	&-item {
		margin: pr(20);
		height: pr(530);
		position: relative;
		overflow: hidden;
		&-image {
			height: 100%;
			img {
				width: 100%;
				min-height: 100%;
			}
		}
		&-content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			top: 0;
			left: 0;
			position: absolute;
			background: rgba(0, 0, 0, 0.3);
			color: #fff;
			text-align: center;
			padding: pr(120) pr(100) 0;
			&-title {
				font-size: pr(55);
				@include text-ellipsis;
			}
			&-descript {
				font-size: pr(42);
				margin-top: pr(50);
				margin-bottom: pr(45);
				@include text-ellipsis;
			}
			&-action {
				width: pr(224);
				height: pr(76);
				line-height: pr(76);
				border: 1px solid #fff;
				margin: 0 auto;
				border-radius: pr(76);
				font-size: pr(33);
			}
		}
	}
}
